<template>
  <div class="header">
    <div class="header-inner">
      <div class="login-info">
        <span class="user-name">登录用户：{{userName}}</span>
        <ul class="lists">
          <li @click="loginOut">退出登录</li>
          <!--<li @click="goSetting">设置</li>-->
        </ul>
      </div>
      <div class="logo">
        <img src="../../../assets/images/logo/logo.png" alt="logo">
        <!--<span>欢迎登录影子点餐后台编辑系统</span>-->
      </div>
    </div>
  </div>
</template>

<script>
  import {handleUserInfo} from '../../../utils/auth'
  import $cache from '../../../utils/cache'

  export default {
    data() {
      return {}
    },
    computed: {
      userName: () => {
        return handleUserInfo({userInfo: 'userInfo', type: 'get'})
      }
    },
    methods: {
      loginOut() {
        let data = {
          username: $cache.get('userInfo')
        }
        this.$axios.post(this.$store.getters.getUrl('loginOut'), data).then(res => {
          console.log('res:', res)
          if (res.data.error_code === 0) {
            handleUserInfo({userInfo: 'auth', type: 'del'});
            handleUserInfo({userInfo: 'userInfo', type: 'del'});
            this.$Message.success({
              content: '注销成功！',
              duration: 1
            });
            setTimeout(() => {
              window.location.reload();
            }, 1000)
          }
        })
      },
      goSetting() {
        this.$router.push({name: 'newsSetting'})
      }
    }
  }
</script>

<style lang='less' type='text/less' scoped>
  .header {
    width: 100%;
    height: @layout1HeaderHeight;
    line-height: @layout1HeaderHeight;
    font-size: 14px;
    .header-inner {
      height: 100%;
      background-color: #fff;
      .logo {
        height: 60px;
        width: 500px;
        img {
          height: 70%;
          margin-left: 20px;
        }
        span {
          list-style: upper-alpha;
          font-size: 14px;
        }
      }
      .login-info {
        float: right;
        margin-right: 70px;
        text-align: center;
        cursor: pointer;
        .lists {
          height: 0;
          overflow: hidden;
          transition: all .4s;
          > li {
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: #00aeff;
            border-top: 1px #ccc solid;
          }
        }
        &:hover {
          .lists {
            height: 80px;
          }
        }
      }
    }
  }
</style>
